import { View } from '@tarojs/components';
import s from './index.module.scss'
import Icon from 'components/Icon'
import { useState } from 'react';

// 200 / 3 / 2 = 33.33% 
// 3   0 -> -66%  1 -> 0  2 -> 66%

// 200 / 4 / 2 = 25%
// 4 

// 200 / 5 / 2 = 20%

function getCurrentLeft(current, x) {
  var __icon = 200 / x
  var __first = -100 + __icon / 2

  if (current == 0) {
    return __first
  }

  return __first + current * __icon
}

const tab = ['bulb', 'safe', 'news', 'home', 'flow']
export default function Index() {
  const [current, setCurrent] = useState(0)

  const _left = `${getCurrentLeft(current, tab.length)}%`


  return(
    <View className={s.wrapper}>
      <View className={s.container}>
        {tab.map((item, index) => (
          <View 
            className={s.box} 
            onClick={() => {
              setCurrent(index)
            }}
          >
            <Icon className={current == index ? `${s.icon} ${s.up}` : s.icon} name={item} size={35} />
          </View>
        ))}
      
       <View style={{left: _left}} className={s.circle}></View>
       <View className={s.content}>
         <View className={s.btn}>
          <View style={{left: _left}} className={s.indicator}></View>
         </View>
       </View>
     </View>
   </View>
  )
}